import core.ui.Dialog;
import core.ui.HtmlEditor;
import core.ui.SplitWindow;
import core.ui.ModalGlassPane;

import xcms.gui.DialogBuilder;

/**
 * Class represents the dialog with WYSIWYG editor.
 */
class xcms.plugins.editor.EditorDialog
    extends core.ui.Dialog
{
    /**
     * Initializes the new editor dialog.
     */
    this.EditorDialog = function()
    {
        with( core.ui )
        {
            super( null, 0, 0, 600, 400 );

            this.setStyle( 'background-color', '#ffffff' );
            this.setStyle( 'border', '1px solid #333333' );

            var builder = new xcms.gui.DialogBuilder();
            var splitter = new SplitWindow( this, 0, 0, '100%', '100%' );

            var controls = new Window( splitter, 0, 0, '100%', 50 );
            controls.setText( 'Here will be editor controls...' );

            this.editor = new core.ui.HtmlEditor( splitter, 0, 0, '100%', 300 );
            this.editor.setStyle( 'border-top', '1px solid #333333' );
            this.editor.iframe.setAttribute( 'scrolling', 'auto' );
            this.editor.addEditorListener( this );

            var buttons = new Window( splitter, 0, 0, 598, 49 );
            buttons.setStyle( 'border-top', '1px solid #333333' );
            this.okButton = builder.createOkButton( buttons, this, -100, 15 );
            this.cancelButton = builder.createCancelButton( buttons, this, -20, 15 );

            splitter.addPane( controls, SplitWindow.SPLIT_TOP );
            splitter.addPane( this.editor, SplitWindow.SPLIT_TOP );
            splitter.addPane( buttons, SplitWindow.SPLIT_BOTTOM );
        }
    }

    /**
     * Calls when editor is ready.
     *
     * @param editor (HtmlEditor) Editor object.
     */
    this.onEditorLoaded = function( editor )
    {
        this.loaded = true;
        editor.document.body.style.padding = '5px';
        editor.document.body.style.paddingLeft = '10px';
        if( this.targetElement )
        {
            editor.setText( this.targetElement.innerHTML );
        }
    }

    /**
     * Starts editing the given element.
     *
     * @param element (HTMLElement) Page element.
     */
    this.edit = function( element )
    {
        this.targetElement = element;
        if( this.loaded )
        {
            this.editor.setText( this.targetElement.innerHTML );
        }
    }

    /**
     * @see Dialog#doModal()
     */
    this.doModal = override(this.doModal, function()
    {
        super();
        var pane = core.ui.ModalGlassPane.getInstance();
        pane.setStyle( 'background-color', '#000000' );
        pane.setStyle( 'opacity', 70 );
    })

    this.onActionPerformed = function( subject )
    {
        if( this.okButton == subject )
        {
            this.fireComplete();
        }
        else
        {
            this.fireCancelled();
        }
    }
}